<template>
<div>
  <el-dialog :close-on-click-modal="true" modal-append-to-body lock-scroll top="10%" :title="$t('call.assginLeakSheetDetail')" :visible.sync="dialogVisible" width="50%">
    <div v-show="history.length===0">{{$t('call.recordNotleakDetail')}}</div>
      <ul>
        <template v-for="con in showHistory">
          <li v-show="con.detail==1" class="treat">
            <span class="bac"><span class="bacTime">{{con.offeringTime}}</span></span>
            <span class="sortStyle">{{con.sort}}</span>
            <agent class="leak-agent" :id="con.disposalAgent" :isNum="true"></agent>
            <call-status :class="['call-status call-status__'+con.status]" :status="con.status"></call-status>
            <call-type class="call-status" :code="con.connectType" :isCallDetail="true"></call-type>
          </li>
        </template>
      </ul>
  </el-dialog>
</div>
</template>
<script>
  // 此组件是未接来电管理的查看详情
  import { deepClone } from '@/utils/m7Utils.js'
  import CallStatus from '@/components/public-modules/cache/CallStatus.vue'
  import CallType from '@/components/public-modules/cache/CallType'
  import Agent from '@/components/public-modules/cache/Agent'
  export default {
    name: 'LeakSheetDetaiDailog',
    data () {
      return {
        dialogVisible: false
      }
    },
    props: {
      isDetailDialog: {
        type: Boolean,
        default: false
      },
      history: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    components: {
      CallStatus,
      CallType,
      Agent
    },
    // watch: {
    //   isDetailDialog (cur, old) { // 监测弹窗状态
    //     this.dialogVisible = cur
    //   }
    // },
    computed: {
      contactHistory () {
        let history = deepClone(this.history)
        let contactHistory = {}
        history.forEach(val => {
          let offeringTime = val.OFFERING_TIME
          let date = offeringTime.split(' ')[0] || ''
          let time = offeringTime.split(' ')[1] || ''
          time = date && time ? `${time.split(':')[0]}:${time.split(':')[1]}` : ''
          let datetime = `${date} ${time}`
          val.date = date
          val.time = time
          val.datetime = datetime
          val.offeringTime = offeringTime

          if (date) {
            if (contactHistory[date]) {
              contactHistory[date].push(val)
            } else {
              contactHistory[date] = []
              contactHistory[date].push(val)
            }
          }
        })
        return contactHistory
      },
      showHistory () { // 整理通话历史数据
        let valArr = []
        let indexArr = []
        let i = 0
        let j = 0
        let cons = []
        for (let key in this.contactHistory) {
          valArr.push(this.contactHistory[key])
          indexArr.push(key)
        }
        for (i = 0; i < indexArr.length; i++) {
          let obj = {}
          for (j = 0; j < valArr[i].length; j++) {
            let item = valArr[i][j]
            // 处理时间数据B
            let datePopout = item.OFFERING_TIME.split(' ')[0] || ''
            let timePopout = item.OFFERING_TIME.split(' ')[1] || ''
            timePopout = datePopout && timePopout ? `${timePopout.split(':')[0]}:${timePopout.split(':')[1]}` : ''
            datePopout = datePopout && timePopout ? `${datePopout.split('-')[1]}${this.$t('business.timeLine.month')}${datePopout.split('-')[2]}${this.$t('business.timeLine.day')}` : ''
            item.OFFERING_TIME = datePopout + ' ' + timePopout
            // 理时间数据S
            obj = {
              _id: item._id,
              disposalAgent: item.DISPOSAL_AGENT,
              offeringTime: item.OFFERING_TIME,
              connectType: item.CONNECT_TYPE,
              time: item.time,
              status: item.STATUS,
              detail: 1
            }
            cons.push(obj)
          }
        }
        return cons
      }
    },
    methods: {
      openOrCloseDialog (curr) { // 打开或者是关闭弹窗
        this.dialogVisible = curr || false
      }
      // dailogClose () { // 关闭弹窗
      //   console.log('浏览器提醒触发了关闭弹窗事件')
      //   this.dialogVisible = false
      //   this.$emit('close')
      // }
    }
  }
</script>
<style lang="stylus" scoped>
@import "../../../assets/common.styl"
ul
  padding 0 0 0 95px
  margin-top -13px
  .refre
    color $c-main
    display inline-block
    padding 0 12px 0 0
    .iconfont
      font-size 14px
  .treat
    position relative
    padding 16px 0 0 40px
    margin-left 55px
    border-left 1px solid $c-his-border
    .public-padding
      padding-top 10px
    .label-color
      color $c-sub
      padding 0 4px
    i
      position absolute
      display inline-block
      width 30px
      border-bottom 1px solid $c-his-border
      top 26px
      left 8px
    img
      position relative
      top -4px
      margin 0 4px
    span
      display inline-block
    .leak-agent
      display inline-block
      margin-left 6px
    .sortStyle
      margin-left -20px
    .bac
      font-size 12px
      width 105px
      height 12px
      line-height 12px
      position absolute
      top 23px
      left -99px
      padding 1px 0
      background $cf-white
      color $cf-gray5
      &:before
        content ""
        width 12px
        height 12px
        display inline-block
        float right
        border-radius 6px
        background-color $cf-level2
      .bacTime
        &:after
          content ''
          position: absolute;
          margin-left: 5px;
          width: 6px;
          height: 0;
          top: 7px;
          right: 13px;
          border-bottom: 1px solid #e5e5e5;
    .d-bac
      top 19px
    .last
      background-color $cf-white
      background-position right top
      height 22px
      top 20px
    p
      margin-top 3px
      font-size 12px
      color $cf-gray3
    h3
      font-size 14px
      color $cf-gray0
      .blu
        color #86d1d5
      .re
        color #ddafee
    .date
      color $cf-white
      height 24px
      width 70px
      line-height 24px
      margin-top 3px
      background $c-sub6
      text-align center
      border-radius 8px
      span
        font-size 18px
  li
    &:first-child
      border-left 0
      &:before
        content ""
        width 1px
        height 100%
        display inline-block
        position absolute
        top 35px
        left 0
        background-color $c-his-border
    &:last-child
      margin-bottom: 60px
      .bac
        height: 29px
  .call-status
    font-size 14px
    margin-right 6px
  .call-status__leak
    color #ff9100
  .call-status__notDeal
    color #0f99fd
    margin-left 6px
  .call-status__queueLeak
    color $c-prompt
  .call-status__limit
    color #c90c0d

</style>
